<template>
  <el-container>
    <el-aside width='200px'>
      <el-menu
        active-text-color='#ffd04b'
        background-color='#545c64'
        class='el-menu-vertical-demo'
        default-active='2'
        text-color='#fff'
        @open='handleOpen'
        @close='handleClose'
      >
        <el-menu-item index='1'>
          <el-icon>
            <icon-menu />
          </el-icon>
          <span>Kafka</span>
        </el-menu-item>
        <el-menu-item index='2'>
          <el-icon>
            <icon-menu />
          </el-icon>
          <span>Topic管理</span>
        </el-menu-item>
        <el-menu-item index='3'>
          <el-icon>
            <Document />
          </el-icon>
          <span>集群管理</span>
        </el-menu-item>
        <el-menu-item index='4'>
          <el-icon>
            <Setting />
          </el-icon>
          <span>运维管控</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <router-view />
    </el-main>
  </el-container>
</template>

<script lang='ts'>

import { Vue, Options } from 'vue-class-component';
import {
  Location, Document, Menu as IconMenu, Setting,
} from '@element-plus/icons-vue';

@Options({
  components: {
    Location,
    Document,
    IconMenu,
    Setting,
  },
})
export default class KafkaAdmin extends Vue {
  // eslint-disable-next-line class-methods-use-this,@typescript-eslint/no-empty-function
  handleOpen(): void {
  }

  // eslint-disable-next-line @typescript-eslint/no-empty-function,class-methods-use-this
  handleClose(): void {
  }
}
</script>
